import React , { useState } from 'react'
import { useNavigate ,useLocation} from 'react-router-dom';
import { Layout,Menu, theme,Modal } from 'antd';
import { eventBus } from '../../../utils/eventBus';
import {useUpdates} from '../../../hooks/useUpdates'
const { Header} = Layout;
const items1 =[{
  key:'/NavPage/mine',
  label: '个人中心',
},
{
  key:'2',
  label: '退出登录',
}]
export default function Mheader() {
  
  const user=JSON.parse(localStorage.getItem('user'))
  const updatePagrs=useUpdates()
  const location = useLocation();
  const navigate = useNavigate();
  const headerStyle = {
    color: '#fff',
    height: 64,
    lineHeight: '64px',
    backgroundColor: '#000000',
  };
  // const [user, setUser]=useState( JSON.parse(localStorage.getItem('user')))
  console.log(user.account,12345);
  
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('是否退出登录');
  const handleOk = () => {
    setModalText('是否退出登录');
    setConfirmLoading(true);
      setOpen(false);
      localStorage.clear()
        navigate('/login')
  };
  React.useEffect(()=>{
     eventBus.addListener('update',()=>{
      console.log('update');
      //  setUser({...JSON.parse(localStorage.getItem('user'))})
      updatePagrs()
     })
  },[])
  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };
 function clickOut(e){
  console.log(e);
  if(e.key=='2'){
    setOpen(true);
  }else{
    navigate('/NavPage/mine')
  }
 }
  return (
   
    <Header style={headerStyle}><div className='headers'><div className='tit1'>蜗牛商城
     <div style={{color:'white',fontSize:'20px',paddingLeft:'20px'}}>欢迎您{user.account}
      <img style={{width:'40px',height:'40px',borderRadius:'20px',verticalAlign:'middle'}} src={'http://jacklv.cn/images/'+user.imgUrl} alt="" /></div>
       </div><div className='user'>
       <Menu
          theme="dark"
          onClick={clickOut}
          mode="horizontal"
          selectedKeys={[location.pathname]}
          items={items1}
        />
        </div>
        <Modal
        title="Title"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <p>{modalText}</p>
      </Modal>
        
        </div></Header>
  )
}
